<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<title>小说详情页</title>
		<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
		<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
		<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
		<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
		<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
		<script>

			$(function (){

                pageList(1, 1);

                //为查询按钮绑定事件
                $("#searchBtn").click(function () {
                    /*
                    	点击查询按钮的时候,我们应该将搜索框中的信息保存起来,保存到隐藏域中
                     */
                    $("#hidden-chapterId").val($.trim($("#chapterId").val()));
                    pageList(1, 1);
                    //然后将搜索框中的数据清空
                    $("#chapterId").val("");
                })

			})


            function pageList(pageNo, pageSize) {

                //查询前,将隐藏域中保存的信息取出来,重新赋予到搜索框中
                $("#chapterId").val($.trim($("#hidden-chapterId").val()));

                $.ajax({
                    url: "novel/pageList.do",
                    data: {
                        "pageNo": pageNo,
                        "pageSize": pageSize,
						"novelId":"${n.id}",
                        "id": $.trim($("#chapterId").val()),
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var html = "";
                        $.each(data.dataList, function (i, n) {
                            html+='<div style="height: 10%">'+n.name+'</div>';
                            html+='<br>';
							html+='<div style="height: 70%">'+n.content+'</div>';
                        })

                        $("#chapterBody").html(html);

                        //计算总页数
                        var totalPages = data.total % pageSize === 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;

                        //数据处理完毕后,结合分页插件对前端展现分页相关的信息
                        $("#chapterPage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 3, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            //该回调函数是在,点击分页组件的时候触发的
                            //pageList方法调用的是自己写的方法,但是里面的参数,是分页插件提供的,不能碰
                            onChangePage: function (event, data) {
                                pageList(data.currentPage, data.rowsPerPage);
                            }
                        });

                    }
                })
            }
		</script>
	</head>
	<body>

		<!-- 返回按钮 -->
		<div style="position: relative; top: 35px; left: 10px;">
			<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left"
																				 style="font-size: 20px; color: #DDDDDD"></span></a>
		</div>

		<!-- 大标题 -->
		<div style="position: relative; left: 40px; top: -30px;">
			<div class="page-header">
				<h3>小说-${n.name} <small>作者:${n.authorId}</small></h3>
			</div>
		</div>



		<div id="chapterBody" style="height: 600px;margin-top: 20px">

			<div style="height: 10%">章节名</div>
			<br>
			<div style="height: 70%">内容</div>
		</div>

		<div style="height: 50px; position: relative;top: 30px;">
			<div id="chapterPage"></div>
			<form class="form-inline" role="form" style="position: relative;top: 1%; left: 250px;">
				<input type="hidden" id="hidden-chapterId">
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">章节编号:</div>
						<input type="text" class="form-control" id="chapterId">
					</div>
				</div>
				<button id="searchBtn" type="button" class="btn btn-default">查询</button>
			</form>
		</div>

		<div style="height: 200px;"></div>
	</body>
</html>
